<!DOCTYPE html>

<html>
  <head>
    <title>{{.title}}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" type="text/css" href="/public/css/bootstrap.css">
    <link rel="shortcut icon" type="image/png" href="/public/img/favicon.png">
    <script src="/public/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var personaConfig = {
          currentUser: {{if .email}}{{.email}}{{else}}null{{end}},
          loginUrl: '/login',
          logoutUrl: '/logout',
        };

        $('#login').on('click', function(e) {
          navigator.id.request();
        });

        $('#logout').on('click', function(e) {
          navigator.id.logout();
        });

        navigator.id.watch({
          loggedInUser: personaConfig.currentUser,
          onlogin: function(assertion) {
            $.ajax({
              type: 'POST',
              url: personaConfig.loginUrl,
              data: {assertion: assertion},
              success: function(res, status, xhr) { window.location.reload(); },
              error: function(xhr, status, err) { navigator.id.logout(); }
            });
          },
          onlogout: function() { window.location = personaConfig.logoutUrl; }
        });
      });
    </script>
    {{range .moreStyles}}
      <link rel="stylesheet" type="text/css" href="/public/{{.}}">
    {{end}}
    {{range .moreScripts}}
      <script src="/public/{{.}}" type="text/javascript" charset="utf-8"></script>
    {{end}}
  </head>
  <body>
